<template>
  <div
    :class="{ hidden: hidden }"
    class="pagination-container box-p"
  >
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="modelValue.total"
      :hide-on-single-page="false"
      size="large"
      :background="true"
    >
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default() {
      return {
        page: 1,
        limit: 50,
        total: 200,
      };
    },
  },
  pageSizes: {
    type: Array as any,
    default() {
      return [5, 10, 20, 30, 50, 100];
    },
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  background: {
    type: Boolean,
    default: false,
  },
  autoScroll: {
    type: Boolean,
    default: true,
  },
  hidden: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue"]);

const currentPage = computed({
  get() {
    return props.modelValue.page;
  },
  set(val) {
    emit("update:modelValue", {
      ...props.modelValue,
      page: val,
      limit: pageSize,
    });
  },
});

const pageSize = computed({
  get() {
    return props.modelValue.limit;
  },
  set(val) {
    emit("update:modelValue", {
      ...props.modelValue,
      page: currentPage,
      limit: val,
    });
  },
});
</script>

<style scoped lang="scss">
.pagination-container {
  padding: 6px 0;
  text-align: right;
  justify-content: center;
}

::v-deep {
  .el-pagination.is-background .btn-prev {
    // background-color: transparent !important;
    margin-left: auto;
  }
  // .el-pager li {
  //   // background-color: transparent !important;
  // }
  // .el-pagination button {
  //   // background-color: transparent !important;
  // }
  // .el-pager li.is-active {
  //   // background-color: transparent !important;
  // }
}
</style>
